import * as React from 'react';
import { Form, Input, Modal, Select, message } from 'antd';
import request from '@/http';
import './sdEdit.less';
import qs from 'qs';

const { Option } = Select;

interface UsereditObjectUp {
  isModalVisible: boolean;
  id?: number;
  collegesName?: any;
  majorName?: any;
  gradeName?: string;
  className?: number;
  classTeacher?: string;
  studentName?: string;
  userNo?: number;
  idNo?: number;
  sex?: string;
  email?: string;
  mobileNo?: number;
  position?: string;
}

interface UsereditObjectDown {
  isModalVisible: boolean;
  id?: number;
  collegesName?: any;
  studentName?: string;
  userNo?: number;
  idNo?: number;
  sex?: string;
  email?: string;
  mobileNo?: number;
  position?: string;
}

//学生明细 （新增学员）  （ 编辑 ）
const SdEdit = (props: {
  editObjectUp: UsereditObjectUp;
  editObjectDown: UsereditObjectDown;
  onClose: any;
}) => {
  const { editObjectUp, editObjectDown, onClose } = props;
  console.log(editObjectDown);
  console.log(editObjectUp);

  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const [formObject] = Form.useForm();

  const modelOnOk = async () => {
    const data = await formObject.validateFields();
    console.log(data);
    const ds = {
      ...data,
      id: window.localStorage.getItem('id'),
    };
    console.log(ds);
    // debugger;
    if (flag) {
      //编辑
      const result: any = await request.post(
        '/api/admin/studentInfoManagement/editStudentsSubsidiary',
        qs.stringify(ds),
      );
      // console.log(122);
      console.log(result);
      if (result.code == 200) {
        message.success('修改成功！');
        if (onClose) {
          onClose();
        }
        setIsModalVisible(false);
      }
    } else {
      //新增
      const result: any = await request.post(
        '/api/admin/studentInfoManagement/insertStudent',
        qs.stringify(ds),
      );
      // console.log(122);
      console.log(result);
      // debugger
      if (result.code == 200) {
        message.success('修改成功！');
        if (onClose) {
          onClose();
        }
        setIsModalVisible(false);
      }
    }
  };
  const dataStore = localStorage.getItem('data');

  if (dataStore != null) {
    var defaultData = JSON.parse(dataStore);
  }

  const modelOnCancel = () => {
    setIsModalVisible(false);
  };

  React.useEffect(() => {
    setIsModalVisible(editObjectUp.isModalVisible);
    if (editObjectUp.id !== null) {
      formObject.setFieldsValue({
        id: editObjectUp.id,
        collegesName: editObjectUp.collegesName,
        majorName: editObjectUp.majorName,
        gradeName: editObjectUp.gradeName,
        className: editObjectUp.className,
        classTeacher: editObjectUp.classTeacher,
        studentName: editObjectUp.studentName,
        userNo: editObjectUp.userNo,
        idNo: editObjectUp.idNo,
        sex: editObjectUp.sex,
        email: editObjectUp.email,
        mobileNo: editObjectUp.mobileNo,
        position: editObjectUp.position,
      });
    }
  }, [editObjectUp]);
  // debugger
  const layout = {
    labelCol: { span: 12 },
    wrapperCol: { span: 12 },
  };

  const flag = editObjectUp.id !== null && editObjectUp.id !== undefined;

  return (
    <>
      <Modal
        width={1200}
        className="modal"
        title={flag ? '编辑学员信息' : '新增学员'}
        visible={isModalVisible}
        onCancel={modelOnCancel}
        onOk={modelOnOk}
        maskClosable={false}
        destroyOnClose
        okText="确认"
        cancelText="取消"
        getContainer={false}
      >
        <Form
          className="form"
          name="editForm"
          form={formObject}
          preserve={false}
        >
          <Form.Item label="院系" name="collegesName">
            <span style={{ marginRight: '80px' }}>
              {editObjectUp.collegesName
                ? editObjectUp.collegesName
                : defaultData.collegesName}
            </span>
          </Form.Item>

          <Form.Item label="专业" name="majorName">
            <span style={{ marginRight: '80px' }}>
              {editObjectUp.majorName
                ? editObjectUp.majorName
                : defaultData.majorName}
            </span>
          </Form.Item>
          <Form.Item label="年级" name="gradeName" style={{ marginBottom: 24 }}>
            <span style={{ marginRight: '80px' }}>
              {editObjectUp.gradeName
                ? editObjectUp.gradeName
                : defaultData.gradeName}
            </span>
          </Form.Item>
          <Form.Item label="班级" name="className">
            <span style={{ marginRight: '50px' }}>
              {editObjectUp.className
                ? editObjectUp.className
                : defaultData.className}
            </span>
          </Form.Item>
          <Form.Item label="班主任" name="classTeacher">
            <span>
              {editObjectUp.classTeacher
                ? editObjectUp.classTeacher
                : defaultData.classTeacher}
            </span>
          </Form.Item>
          <Form.Item label="学生姓名" name="studentName">
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;号"
            name="userNo"
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="项目角色"
            name="position"
            style={{ width: 180 }}
            initialValue=""
          >
            <Select>
              <Option value="">请选择...</Option>
              <Option value="UI" key="UI">
                UI
              </Option>
              <Option value="前端" key="前端">
                前端
              </Option>
              <Option value="后端" key="后端">
                后端
              </Option>
              <Option value="测试" key="测试">
                测试
              </Option>
              <Option value="产品经理" key="产品经理">
                产品经理
              </Option>
              <Option value="项目经理" key="项目经理">
                项目经理
              </Option>
            </Select>
          </Form.Item>

          <Form.Item
            label="性别"
            name="sex"
            style={{ width: 150 }}
            initialValue=""
          >
            <Select>
              <Option value="">请选择...</Option>
              <Option value="男" key="男">
                男
              </Option>
              <Option value="女" key="女">
                女
              </Option>
            </Select>
          </Form.Item>
          <Form.Item
            label="身&nbsp;&nbsp;份&nbsp;&nbsp;证"
            name="idNo"
            rules={[
              {
                whitespace: true,
                message: '身份证号码不能为空!',
              },
              { min: 18, max: 18, message: '身份证号码长度必须是18位!' },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="邮&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;箱: "
            name="email"
            rules={[
              {
                type: 'email',
                message: '请输入正确的邮箱!',
              },
              {
                message: '请输入邮箱!',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
          <Form.Item
            label="电话号码"
            name="mobileNo"
            rules={[
              {
                pattern: /^1[3456789]\d{9}$/,
                message: '请输入正确的电话号码!',
              },
            ]}
          >
            <Input placeholder="请输入" />
          </Form.Item>
        </Form>
      </Modal>
    </>
  );
};

export { SdEdit, UsereditObjectUp, UsereditObjectDown };
